<style scoped lang="scss">
.dialogContainer {

  .diagloy-wrapper {
    background: #fff;
    min-width: 100px;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s;


    &.hidden {
      opacity: 0.5;

    }


    .dialog-body-container {
      padding: 20px;
    }


    ::v-deep {
      .el-dialog__header {
        padding-bottom: 15px;
      }
    }
  }


  .dialog-title {
    border-bottom: 1px solid #f2f6fc;
  }
}
</style>
<template>
  <div class="dialogContainer" hidden :style="`z-index:${maxZinedx}`">
    <div class="diagloy-wrapper el-dialog" ref="dialog123"
         :style="`width:${$props.width||'100px'};z-index:${maxZinedx};transform:none;box-shadow: rgb(221 221 221) 0px 5px 10px;`"
         :class="{hidden:!visible}"
    >
      <div class="dialog-title el-dialog__header">
        <span>{{ $props.title }}</span>
        <svg-icon
            @click.native.stop.prevent="closeDialog"
            icon-class="close" style="position: absolute;right:15px;top:20px;cursor: pointer;"></svg-icon>
      </div>
      <div class="dialog-body-container" :style="`max-height: calc(100vh - 230px);overflow-y:auto;`">
        <slot></slot>
      </div>
      <div class="title-footer el-dialog__footer">
        <slot name="footer"></slot>
      </div>
    </div>

  </div>
</template>
<script>
import Vue from 'vue'
import { getMaxZIndex } from '@/components/mydialog/mydialogUtils'

export default {
  props: {
    visible: { type: [Boolean] },
    width: { type: [String] },
    title: { type: [String] },
    destroyed: { type: [Function] },
    position: {
      type: [String],
      default() {
        return 'center'
      }
    }
  },
  data() {
    return {
      document,
      maxZinedx: '888',
      getMaxZIndex,
      myvisible: false,
      settimeout1: undefined
    }
  },
  watch: {
    '$props.visible': {
      handler(value) {
        this.myvisible = value
        if (value) {

          this.settimeout1 && clearTimeout(this.settimeout1)

          this.settimeout1 = setTimeout(() => {
            this.fixedPosition()
            this.$emit('opened')
          }, 300)
        } else {
          this.destory()
        }
      },
      immediate: true
    }
  },

  methods: {
    destory() {
      this.$props && this.$props.destroyed && this.$props.destroyed()
    },
    closeDialog() {
      this.myvisible = false
      this.destory()

    },

    fixedPosition() {
      this.maxZinedx = getMaxZIndex()
      var dom = this.$refs['dialog123']
      $(dom).parent('.dialogContainer').show()

      //console.log('dialog  dom ', dom);
      var width = $(dom).width()
      var height = $(dom).height()
      var left = 0
      var top = 0
      if (this.$props.position === 'center') {
        top = ((document.documentElement.offsetHeight - height) / 2) + 'px'
        left = ((document.documentElement.offsetWidth - width) / 2) + 'px'
      } else if (this.$props.position === 'tr') {
        left = ((document.documentElement.offsetWidth - width) - 10) + 'px'
        top = 120 + 'px'
      } else if (this.$props.position === 'br') {
        left = ((document.documentElement.offsetWidth - width) - 10) + 'px'
        top = ((document.documentElement.offsetHeight - height) - 10) + 'px'
      } else {
        top = ((document.documentElement.offsetHeight - height) / 2) + 'px'
        left = ((document.documentElement.offsetWidth - width) / 2) + 'px'
      }

      console.log(' left, top,', left, top)
      $(dom).css({
        left, top
      })
    }
  }

}
</script>
